<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/css/bootstrap.min.css">

    <script src="static/js/vue.js"></script>
</head>
<body>

    <!--1.一个容器-->
    <div id="app">
        <my-div :my-title="title"></my-div>
    </div>

    <script>

        var app = new Vue({
            el:"#app",//vue实现的挂载点  dom的id
            data:{
                title:"父组件的数据"
            },
            components:{
                "MyDiv":{template:`<div>
            <input type="text" class="form-control" v-model="title">
            <h1>{{myTitle}}</h1>
            <button class="btn-success">新增</button>
        </div>`,
                    data(){
                    return {title:"子组件的数据"};
                    },
                    props:{
                        myTitle:{
                            type:String, //类型
                            default:"默认值",//默认值
                            required:true
                        }
                    }
        } }

        });

    </script>

</body>
</html>